<template>
  <div>
    <el-table
      :data="tableData.list"
      style="width: 100%"
      @expand-change="getCensusOrder"
      row-key="id"
      :expand-row-keys="expanded"
    >
      <el-table-column type="expand">
        <template #default="scope" :name="scope">
          <el-form
            label-position="left"
            inline
            class="demo-table-expand"
            v-loading="loading"
            ref="msgForm"
            style="padding: 0 40px"
          >
            <el-form-item label="交易总额">
              <span>{{ nowOrderData.allMoney }}</span>
            </el-form-item>
            <el-form-item label="订单总数">
              <span>{{ nowOrderData.orderCount }}</span>
            </el-form-item>
            <el-form-item label="车检总数">
              <span>{{ nowOrderData.allCars }}</span>
            </el-form-item>
            <el-form-item label="商务经理">
              <span>{{ nowOrderData.serveName }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="storeName" label="商家名称"> </el-table-column>
      <el-table-column prop="storePhone" label="商家电话"> </el-table-column>
      <el-table-column label="商家logo">
        <template #default="scope">
          <el-image
            style="width: 50px; height: 50px"
            :src="scope.row.storeLogo"
            fit="fill"
            :preview-src-list="[scope.row.storeLogo]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="商家类型">
        <template #default="scope">
          <el-tag v-if="scope.row.storeType == '1'">汽车4S店</el-tag>
          <el-tag v-else-if="scope.row.storeType == '2'">汽车修理厂</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="masterName" label="负责人名称"> </el-table-column>
      <el-table-column prop="masterPhone" label="负责人电话"> </el-table-column>
      <el-table-column prop="address" label="商家地址"> </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="mini" @click="openDialog(scope.row)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="tableData.total"
      @current-change="handleCurrentChange"
    >
    </el-pagination>

    <el-dialog title="商家详情" :visible.sync="dialogVisible" width="50%" center>
      <el-descriptions :column="3" border>
        <el-descriptions-item>
          <template slot="label"> 商家名称 </template>
          {{ nowOrder.storeName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 商家类型 </template>
          <el-tag v-if="nowOrder.storeType == '1'">汽车4S店</el-tag>
          <el-tag v-else-if="nowOrder.storeType == '2'">汽车修理厂</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 商家logo </template>
          <el-image
            style="width: 50px; height: 50px"
            :src="nowOrder.storeLogo"
            :preview-src-list="[nowOrder.storeLogo]"
            fit="fill"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 商家地址 </template>
          {{
            nowOrder.province + nowOrder.city + nowOrder.town + nowOrder.address
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 商家电话 </template>
          {{ nowOrder.storePhone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 商家门头 </template>
          <el-image
            v-for="(item, index) in nowOrder.frontDoor"
            :key="index"
            style="width: 100px; height: 100px"
            :src="item"
            fit="contain"
            :preview-src-list="nowOrder.frontDoor"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 营业执照 </template>
          <el-image
            v-for="(item, index) in nowOrder.bizLicense"
            :key="index"
            style="width: 100px; height: 100px"
            :src="item"
            fit="contain"
            :preview-src-list="nowOrder.bizLicense"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 负责人姓名 </template>
          {{ nowOrder.masterName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 负责人电话 </template>
          {{ nowOrder.masterPhone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 商务经理 </template>
          {{ nowOrder.serveName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 商务电话 </template>
          {{ nowOrder.servePhone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 申请时间 </template>
          {{ nowOrder.createDate }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: {},
      dialogVisible: false,
      nowOrder: {},
      nowOrderData: {},
      loading: false,
      expanded: [],
      show: false,
    };
  },
  mounted() {
    this.getMerchants(1, 10);
  },
  methods: {
    getMerchants: async function (pageNum, pageSize = 10) {
      let res = await this.$http.get(
        `/merchant/getMerchants?pageNum=${pageNum}&pageSize=${pageSize}`
      );
      this.tableData = res.data.object;
    },
    getCensusOrder: async function (row, expandedRows) {
      if (expandedRows.length) {
        this.expanded = [row.id];
        let res = await this.$http.get(
          `/order/censusOrder?merchantId=${row.id}`
        );

        this.nowOrderData = res.data.object;
      }
      //   this.$nextTick(() => {
      //     // this.nowOrderData = this.$refs.msgForm.innerHTML
      //     this.nowOrderData = res.data.object;
      //   });
    },
    handleCurrentChange(val) {
      this.getMerchants(val);
    },
    openDialog(data) {
      this.dialogVisible = true;
      this.nowOrder = data;
    },
    setLoading(time) {
      this.loading = true;
      setTimeout(() => (this.loading = false), time);
    },
  },
};
</script>

<style scoped>
.el-table__expanded-cell[class*="cell"] {
  padding: 20px 50px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
.el-image__placeholder {
  background: url(../../../public/img/009.gif);
  background-size: cover;
}
</style>
